<template>
    <div class="login-container">
        <h1>修改密码</h1>
        <div class="login-form">
            账号：<input type="text" v-model="account"><br/>
            原密码：<input type="password" v-model="oldPwd"><br/>
            新密码：<input type="password" v-model="newPwd"><br/>
            <button class="back" @click="goBack">取消</button>
            <button @click="modifyPassword">提交</button>
        </div>
    </div>
</template>

<script>
import axios from '../axios/index.js'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
setup() {
    const account = ref('')
    const oldPwd = ref('')
    const newPwd = ref('')

    const router = useRouter()

    async function modifyPassword() {
        try {
            const response = await axios.post('/users/modify', {
            account: account.value,
            oldPwd: oldPwd.value,
            newPwd: newPwd.value
            })

            alert(response.data.msg)

            if (response.data.code === 2000) {
            router.push('/login')
            }
        } catch (err) {
            console.error('修改密码失败:', err)
            alert('修改密码失败，请检查账号或密码')
        }
    }

    function goBack() {
        router.push('/login')
    }

    return {
    account,
    oldPwd,
    newPwd,
    modifyPassword,
    goBack
    }
}
}
</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100vh;
    background-image: url('../assets/background.jpeg');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Arial, sans-serif;
}

.login-form {
    background-color: rgba(35, 48, 129, 0.5);
    padding: 20px;
    border-radius: 8px;
    text-align: right;
    position: relative;
    z-index: 1;
}

.login-form input {
    margin-bottom: 10px;
    padding: 5px;
    width: 200px;
}

.login-form button {
    width: 70px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 5px;
    margin-right: 60px;
}

.login-form .back {
  background-color: #6c757d;
  margin-right: 10px;
}
</style>